<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <th:block th:include="include :: header('敏感信息详情')"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/iconfont/iconfont.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/bootstrap-tagsinput/tagsinput.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/jQuery-ui/jquery-ui.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}">
</head>
<style>
    label {
        font-weight: bold;
        width: 75%;
    }

    @font-face {
        font-family: 'huawen';
        src: url("/fonts/huawen.woff2");
    }

    .label-boxb {
        margin-top: 20px;
    }

    .lable-page-icon {
        color: #ccc;
        position: absolute;
        top: 7px;
        right: 20px;
    }

    .lable-page-icon:hover {
        cursor: pointer
    }
</style>
<body style="background-color: #ffff;letter-spacing:2px;font-family:'huawen' ;font-weight: bold">
<div class="label-boxb col-sm-10" style="display: none;">
    <select class="form-control" th:with="fields=${@commonServiceImpl.findSensitiveField()}" onchange="change_select(event)" style="border: 1px solid #ccc;width: 25%" required>
        <option value="-1">--请选择--</option>
        <option th:each="field : ${fields}"
                th:text="${field.name}"
                th:value="${field.id}"
        ></option>
    </select>
    <input id="lable" placeholder="回车添加新的标签" class="form-control lable" type="text"
           onkeypress="searchKeyWords(event)" required>
    <div class="iconfont icon-chacha lable-page-icon" onclick="deleteLablepage(this)"></div>
</div>
<form id="form-sensitive-add" th:object="${sensitivity}">
    <input type="hidden" id="telGetDealPk" th:field="*{telGetDealPk}"/>
    <input type="hidden" id="sensitiveId" th:field="*{id}"/>
    <div class="label-box entering-mt col-sm-12" >
<!--    id 为空时显示（id除非不为空才不显示）-->
    <block th:unless="*{details}">
        <div class="label-boxb col-sm-10" style="display: flex">
            <select class="form-control" th:with="fields=${@commonServiceImpl.findSensitiveField()}" onchange="change_select(event)" style="border: 1px solid #ccc;width: 25%" required>
                <option value="-1">--请选择--</option>
                <option th:each="field : ${fields}"
                        th:text="${field.name}"
                        th:value="${field.id}"></option>
            </select>
            <input placeholder="回车添加新的标签" class="form-control lable" type="text"
                   onkeypress="searchKeyWords(event)" required>
            <div class="iconfont icon-chacha lable-page-icon" onclick="deleteLablepage(this)"></div>
        </div>
    </block>
<!--    id 不为空时显示-->
    <block th:if="*{details}" th:each="detail,stat:*{details}">
        <input type="hidden" th:name="${'details['+stat.index+'].id'}" th:value="${detail['id']}"/>
        <input type="hidden" class="isDel" th:name="${'details['+stat.index+'].isDel'}" th:value="${detail['isDel']}"/>
        <div class="label-boxb col-sm-10" style="display: flex">
            <select class="form-control" th:name="${'details['+stat.index+'].fieldId'}" th:with="fields=${@commonServiceImpl.findSensitiveField()}" onchange="change_select(event)" style="border: 1px solid #ccc;width: 25%" required>
                <option value="-1">--请选择--</option>
                <option th:each="field : ${fields}"
                        th:text="${field.name}"
                        th:value="${field.id}"
                        th:selected="${field.id == detail['fieldId']}"></option>
            </select>
            <input th:name="${'details['+stat.index+'].value'}" placeholder="回车添加新的标签" class="form-control lable" type="text"
                   onkeypress="searchKeyWords(event)" th:value="${detail['value']}" required>
            <div class="iconfont icon-chacha lable-page-icon" onclick="deleteLablepage(this)"></div>
        </div>
    </block>
    </div>
</form>

</body>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-tagsinput/tagsinput.min.js}"></script>
<script th:src="@{/ajax/libs/jQuery-ui/jquery-ui.js}"></script>
<script th:src="@{/ajax/libs/qxEasyUI/jquery.easyui.min.js}"></script>
<script th:src="@{/common/js/hm-ui.js}"></script>
<script th:src="@{/js/teladd.js}"></script>
<script>
    var prefix = ctx + 'system/sensitive';
    var innerHtml = $($('.label-boxb')[0]).html();
    // //回车
    // function searchKeyWords(event) {
    //     if (event.keyCode == "13") {
    //         let len = $(".label-boxb").length - 1;
    //         if (document.getElementsByClassName("lable")[len].value != '') {
    //             $(".label-box").append("<div class=\"label-boxb col-sm-10\" style=\"display: flex\">\n"+innerHtml);
    //             $(document.getElementsByClassName("lable")[len + 1]).focus();
    //         }
    //     }
    // }
    //select
    function change_select(e){
        if($(e.target).attr('name') != null){
            return
        }
        var index = $(e.target).parent('.label-boxb').index();
        if (e.target.value != -1){
            $(e.target).attr('name','details['+index+'].fieldId');
            $(e.target).next().attr('name','details['+index+'].value');
        }else{
            $(e.target).removeAttr('name');
            $(e.target).next().removeAttr('name');
        }

    }

    //删除
    function deleteLablepage(a) {
        //找到当前兄弟结节的值
        if ($('.label-boxb').length != 1) {
            $(a).parent().siblings('input[class=isDel]').val(1);
            //删除节点
            a.parentElement.remove()
            a.remove()
        }
    }

</script>
</html>